<!DOCTYPE html>
<html class="" lang="zxx">
<head>
	<title>选择商品</title>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">	
		<link rel="stylesheet" type="text/css" href="css/all.min.css">				
		<link rel="stylesheet" type="text/css" href="css/owl.theme.default.min.css">
		<link rel="shortcut icon" type="image/x-icon" href="img/Favicon.ico">
		<link rel="stylesheet" type="text/css" href="css/animate.min.css">
		<link rel="stylesheet" type="text/css" href="css/fontawesome.css">
		<link rel="stylesheet" type="text/css" href="css/fontawesome.min.css">
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<link rel="stylesheet" type="text/css" href="css/media.css">
		<link rel="stylesheet" type="text/css" href="css/responsive.css">
		<link rel="stylesheet" type="text/css" href="css/owl.carousel.css">
  		<link rel="stylesheet" type="text/css" href="css/owl.theme.default.css">
	   <link rel="stylesheet" href="lib/layui-v2.6.3/css/layui.css" media="all">
	   <link rel="stylesheet" href="css/public.css" media="all">


</head>
<body>
<!--11111-->
<th:block th:include="header"/>
	<div id="shop_page" class="shop-page animate__animated animate__fadeInUp">
		<div class="sp_header bg-white p-3">
			<div class="container custom_container ">	
				<div class="row ">
					<div class="col-12 ">
						<ul>
							<li class="d-inline-block font-weight-bolder"><a href="index.html">首页</a></li>
							<li class="d-inline-block hr_ font-weight-bolder"><a href="#">店</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<div class="container custom_container">
			<div class="row">
				<div class="col-lg-3 col-md-4">
					<div class="shop_sidebar border card-body rounded bg-white">

						<h2 class="text-uppercase card-title  font-weight-bold d-md-block d-none">过滤条件</h2>

						<div class="s_filter mt-0">
							<h6 class="text-uppercase  border-bottom font-weight-bold">范围<button class="toggle collapsed" data-toggle="collapse" data-target="#shop_range_collapse"></button></h6>
								<div class="collapse " id="shop_range_collapse">
									<div class="col-md-6 col-sm-12 pl-0 pr-md-2 pr-sm-0 pr-0">
										<label class="font-weight-bolder">最小</label>
										<input type="number" class="form-control"  placeholder="$0">
									</div>
									<div class="col-md-6 col-sm-12 pr-0 pl-md-2 pl-sm-0 pl-0 ">
										<label class="font-weight-bolder">最大</label>
										<input type="number" class="form-control"  placeholder="$0">
									</div>
								</div>
						</div>

						<div class="s_filter form">
							<h6 class="text-uppercase  border-bottom font-weight-bold">颜色<button class="toggle collapsed" data-toggle="collapse" data-target="#shop_color_collapse"></button></h6>
							<div class="collapse" id="shop_color_collapse">
								<label class="form-check">
			                        <input class="form-check-input" type="checkbox" value="">
			                        <span class="form-check-label font-weight-bolder">pink</span>
			                        <span class="text-right float-right font-weight-bolder">(1)</span>
			                    </label>
								<label class="form-check">
			                        <input class="form-check-input " type="checkbox" value="">
			                        <span class="form-check-label font-weight-bolder">yellow</span>
			                        <span class="text-right float-right font-weight-bolder">(1)</span>
			                    </label>
								<label class="form-check">
			                        <input class="form-check-input" type="checkbox" value="">
			                        <span class="form-check-label font-weight-bolder">white</span>
			                        <span class="text-right float-right font-weight-bolder">(1)</span>
			                    </label>
								<label class="form-check">
			                        <input class="form-check-input" type="checkbox" value="">
			                        <span class="form-check-label font-weight-bolder">black</span>
			                        <span class="text-right float-right font-weight-bolder">(1)</span>
			                    </label>
			                </div>
						</div>

						<div class="s_filter">
							<h6 class="text-uppercase border-bottom font-weight-bold">品牌<button class="toggle collapsed" data-toggle="collapse" data-target="#shop_brand_collapse"></button></h6>
							<div class="collapse" id="shop_brand_collapse">
								<label class="form-check">
			                        <input class="form-check-input" type="checkbox" value="">
			                        <span class="form-check-label font-weight-bolder">brand1</span>
			                        <span class="text-right float-right font-weight-bolder">(1)</span>
			                    </label>
								<label class="form-check">
			                        <input class="form-check-input" type="checkbox" value="">
			                        <span class="form-check-label font-weight-bolder">brand1</span>
			                        <span class="text-right float-right font-weight-bolder">(1)</span>
			                    </label>
								<label class="form-check">
			                        <input class="form-check-input" type="checkbox" value="">
			                        <span class="form-check-label font-weight-bolder">another brand</span>
			                        <span class="text-right float-right font-weight-bolder">(1)</span>
			                    </label>
			                </div>
						</div>	

						<div class="s_filter">
							<h6 class="text-uppercase border-bottom font-weight-bold">尺码<button class="toggle collapsed" data-toggle="collapse" data-target="#shop_size_collapse"></button></h6>
							<div class="collapse" id="shop_size_collapse">
								<label class="form-check">
			                        <input class="form-check-input" type="checkbox" value="">
			                        <span class="form-check-label font-weight-bolder">s</span>
			                        <span class="text-right float-right font-weight-bolder">(1)</span>
			                    </label>
								<label class="form-check">
			                        <input class="form-check-input" type="checkbox" value="">
			                        <span class="form-check-label font-weight-bolder">m</span>
			                        <span class="text-right float-right font-weight-bolder">(1)</span>
			                    </label>
								<label class="form-check">
			                        <input class="form-check-input" type="checkbox" value="">
			                        <span class="form-check-label font-weight-bolder">l</span>
			                        <span class="text-right float-right font-weight-bolder">(1)</span>
			                    </label>
								<label class="form-check">
			                        <input class="form-check-input" type="checkbox" value="">
			                        <span class="form-check-label font-weight-bolder">xl</span>
			                        <span class="text-right float-right font-weight-bolder">(1)</span>
			                    </label>
			                </div>
			            </div>
			            

							<button data-search-url="#" class="btn btn-primary clear_btn ">Clear all</button>

							
							</div>
					
				</div>

				<div class="col-lg-9 col-md-8">
					
					<div class="row shop_grid_list_row mb-5 bg-white p-2 p-md-1 mb-lg-3 mx-0">
				          <div class="col-xl-2 col-sm-2 col-4 pl-0">
				            <a href="#" id="grid" class="btn">
				            <span class="grid_icon  p-1"><i class="fas fa-th"></i></span>
				            </a>
				            <a href="#" id="list" class="btn">
				              <span class="list_icon  p-1"><i class="fas fa-list"></i></span>
				            </a>
				          </div>
				          <div class="col-xl-4 d-xl-inline-block d-lg-none d-sm-none d-none">
				            <div class="show-product pt-1"><a href="#"> 这里有8个商品 </a></div>
				          </div>
				          <div class="col-xl-6 col-sm-10 col-8 pr-0 sortpro">
				            <div class="sort-by text-right">
				              <div class="sort">
				                <select class="custom-select" id="inlineFormCustomSelect">
							        <option selected>排序...</option>
							        <option value="1">Relevance</option>
							        <option value="2">Name, A to Z</option>
							        <option value="3">Name, Z to A</option>
                                	<option value="3">Price, low to high</option>
                                	<option value="3">Price, high to low</option>
							    </select>
				              </div>               
				            </div>
				          </div> 
			        </div>

			        <div id="model" class="row">
                   <!--就这-->


			        </div>

				</div>
				<input  type="hidden" th:value="${secondId}" id="secondId">

			</div>
		</div>

		<div class="container custom_container">
			<div class="row">
				<div class="col-12">
					<nav class="float-right mt-5 mt-col-3">
					  <ul class="pagination">
					    <li class="page-item">
					      <a class="page-link" href="#">
					        <span aria-hidden="true">&laquo;</span>
					      </a>
					    </li>
					    <li class="page-item"><a class="page-link" href="#">1</a></li>
					    <li class="page-item"><a class="page-link" href="#">2</a></li>
					    <li class="page-item"><a class="page-link" href="#">3</a></li>
					    <li class="page-item">
					      <a class="page-link" href="#">
					        <span aria-hidden="true">&raquo;</span>
					      </a>
					    </li>
					  </ul>
					</nav>
				</div>
			</div>
		</div>


	</div>	<!-- shop_page -->


<!-- shop page -->









<!-- footer -->

<div class="footer">
	<div class="first_footer">
		<div class="container custom_container">
			<div class="row">
				<div class="col-lg-6 col-md-7 col-12 d-none d-sm-none d-md-block">
					<span class="d-inline-block"><svg width="110px" height="110px"><use xlink:href="#send"></use></svg></span>
					<div class="newsletter d-inline-block align-middle">
						<h4 class="text-light">Join Our Newsletter Now</h4>
						<p class="mb-0">Register to get updates on promotions.</p>
					</div>
				</div> <!-- col-md-5 col-12 -->
				<div class="col-lg-6 col-md-5 col-sm-12 col-12">
					<div class="input-group">
					  <input type="text" class="form-control border-white" placeholder="Subscribe newsletter..." aria-label="Subscribe newsletter..." aria-describedby="button-addon2">
					  <div class="input-group-append">
					    <button class="btn btn-outline-secondary text-uppercase" type="button" id="button-addon2">submit</button>
					  </div>
					</div>
				</div>
			</div>
		</div>
	</div> <!-- row first_footer -->

	<div class="second_footer ">
		<div class="container custom_container">
			<div class="row">
				<div id="logo_carousel" class="owl-carousel owl-theme ">

					<div class="item">
					    <div class="col-12">
							<a href="#">
									<img src="img/logo1.png" class="second-img mx-auto d-block img-fluid" alt="logo1">												
							</a>							
						</div>
					</div> <!-- item -->

					<div class="item">
					    <div class="col-12">
							<a href="#">
									<img src="img/logo2.png" class="second-img mx-auto d-block img-fluid" alt="logo2">												
							</a>							
						</div>
					</div> <!-- item -->

					<div class="item">
					    <div class="col-12">
							<a href="#">
									<img src="img/logo3.png" class="second-img mx-auto d-block img-fluid" alt="logo3">												
							</a>							
						</div>
					</div> <!-- item -->

					<div class="item">
					    <div class="col-12">
							<a href="#">
									<img src="img/logo4.png" class="second-img mx-auto d-block img-fluid" alt="logo4">												
							</a>							
						</div>
					</div> <!-- item -->

					<div class="item">
					    <div class="col-12">
							<a href="#">
									<img src="img/logo1.png" class="second-img mx-auto d-block img-fluid" alt="logo1">												
							</a>							
						</div>
					</div> <!-- item -->

					<div class="item">
					    <div class="col-12">
							<a href="#">
									<img src="img/logo2.png" class="second-img mx-auto d-block img-fluid" alt="logo2"> 												
							</a>							
						</div>
					</div> <!-- item -->

					<div class="item">
					    <div class="col-12">
							<a href="#">
									<img src="img/logo3.png" class="second-img mx-auto d-block img-fluid" alt="logo3">												
							</a>							
						</div>
					</div> <!-- item -->

				</div>
			</div>
		</div>
	</div> <!-- row first_footer -->

	<div class="third_footer">

		<div class="container custom_container">
			<div class="th_foo">
				<div class="row">

					<div class="col-xl-4 col-lg-3 col-md-3 col-12 f_col">
						<div class="fst_col">
							<div class="footer_title">
								<h5 class="text-uppercase text-white">contact us<button class="toggle collapsed" data-toggle="collapse" data-target="#fproduct"></button></h5>
							</div>
							<div class="categorie collapse " id="fproduct">
							<ul class="add_row">
								<li>
									<div>
										<a href="#"><svg width="18px" height="18px"><use xlink:href="#map"></use></svg></a>
									</div>
									<div class="data1 add">
									 <a href="#">1093,  Marigold Lane,<br> Coral Way, Miami,<br>Florida, 33169</a>
									</div>
								</li>
								<li>
									<div>
										<a href="#"><svg height="16px" width="16px"><use xlink:href="#call" ></use></svg></a>
									</div>
									<div>
									<a href="#">610-403-403</a>
									</div>
								</li>
  								<li>
									<div>
										<a href="#"><svg height="16px" width="16px"><use xlink:href="#mail" ></use></svg></a>
									</div>
									<div>
									<a href="#" class="mail_f">company@example.com</a>
									</div>
								</li>
							</ul>
							<ul class="foo_pay">
								<li>
									<a href="#"><i class="fab fa-cc-mastercard"></i></a>
								</li>
								<li>
									<a href="#"><i class="fab fa-cc-visa"></i></a>
								</li>
								<li>
									<a href="#"><i class="fas fa-credit-card"></i></a>
								</li>
								<li>
									<a href="#"><i class="fab fa-cc-paypal"></i></a>
								</li>
							</ul>
						</div>
						</div>
					</div>

					<div class="col-xl-3 col-lg-3 col-md-3 col-12">
						<div class="sec_col">
							<div class="footer_title">
								<h5 class="text-uppercase text-white">my account<button class="toggle collapsed" data-toggle="collapse" data-target="#sproduct"></button></h5>
							</div>
							<div class="categorie collapse" id="sproduct">
							<ul>
								<li><a href="about-us.html">About Us</a></li>
								<li><a href="#">Delivery Infomations</a></li>
								<li><a href="#">Privacy Policy</a></li>
								<li><a href="#">Discount</a></li>
								<li><a href="#">Custom Service</a></li>
								<li><a href="#">Terms & Condition</a></li>
							</ul>
						</div>
						</div>
					</div>
					<div class="col-xl-3 col-lg-3 col-md-3 col-12">
						<div class="th_col">
							<div class="footer_title">
								<h5 class="text-uppercase text-white">categories<button class="toggle collapsed" data-toggle="collapse" data-target="#tproduct"></button></h5>
							</div>
							<div class="categorie collapse" id="tproduct">
							<ul>
								<li><a href="#">airplanes</a></li>
								<li><a href="#">cars</a></li>
								<li><a href="#">Helicopters</a></li>
								<li><a href="#">Quadcopters</a></li>
								<li><a href="#">RC Boats & Yachts</a></li>
								<li><a href="#">RC Vehicle Parts</a></li>
								<li><a href="#">Drones Mini Drones</a></li>
								<li><a href="#">My personal info</a></li>

							</ul>
						</div>
						</div>
					</div>
					<div class="col-xl-2 col-lg-3 col-md-3 col-12">
						<div class="fth_col">
							<div class="footer_title">
								<h5 class="text-uppercase text-white">information<button class="toggle collapsed" data-toggle="collapse" data-target="#fh_product"></button></h5>
							</div>
							<div class="categorie collapse" id="fh_product">
							<ul>
								<li><a href="#">About</a></li>
								<li><a href="#">Delivery</a></li>
								<li><a href="#">Privacy Policy</a></li>
								<li><a href="#">Discount</a></li>
								<li><a href="#">Custom Service</a></li>
								<li><a href="#">Terms & Condition</a></li>
							</ul>
						</div>
						</div>
					</div>

				</div>
			</div>
		</div>

	</div> <!-- row first_footer -->

	<div class="fourth_footer">
		<div class="container custom_container">
			<div class="fth_foo">
				<div class="row">
					<div class="col-md-8 col-12 item_row d-sm-none d-none d-md-block">
						<div>
							<ul class="item_name1">
								<li class="text-uppercase text-white font-weight-bolder">fashion-</li>
								<li><a href="#"> Sofa</a></li>
								<li><a href="#">Chair</a></li>
								<li><a href="#">Dining table</a></li>
								<li><a href="#">Desk</a></li>
								<li><a href="#">Table</a></li>
								<li><a href="#">Lowline TV Units</a></li>
								<li><a href="#">Living room</a></li>
								<li><a href="#">Bathroom</a></li>
								<li><a href="#">Stool  </a></li>
							</ul>
						</div>
						<div>
							<ul class="item_name1">
								<li class="text-uppercase text-white font-weight-bolder">furniture-</li>
								<li><a href="#">Living room</a></li>
								<li><a href="#">Bathroom</a></li>
								<li><a href="#">Stool  </a></li>
								<li><a href="#"> bedroom</a></li>
								<li><a href="#">Table lamp</a></li>
								<li><a href="#">Nightstand</a></li>
								<li><a href="#">Pillow</a></li>
								<li><a href="#"> computer desk</a></li>
							</ul>
						</div>
						<div>
							<ul class="item_name1">
								<li class="text-uppercase text-white font-weight-bolder">fashion-</li>
								<li><a href="#"> Sofa</a></li>
								<li><a href="#">Chair</a></li>
								<li><a href="#">Dining table</a></li>
								<li><a href="#"> computer desk</a></li>
								<li><a href="#"> nightstand</a></li>
								<li><a href="#"> pillow</a></li>
								<li><a href="#"> Clock</a></li> 
								<li><a href="#">Bathroom</a></li>
								<li><a href="#">Stool  </a></li>
								<li><a href="#"> bedroom</a></li>
							</ul>
						</div>
					</div>
					<div class="col-md-4 col-sm-12 col-12">
						<ul class="item_name2">
						 	<li><h6  class="text-uppercase text-white font-weight-bold pb-3">download the app</h6></li>
						 	<li>
						 		<a href="#"><img src="img/foo_icon1.png" class="second-img img-fluid " alt="foo_icon1"></a>
						 		<a href="#"><img src="img/foo_icon2.png" class="second-img img-fluid " alt="foo_icon2"></a>
						 	</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div> <!-- row first_footer -->

	<div class="fifth_footer">
		<div class="container custom_container">
			<div class="row">
				<div class="col-12">
					<div class="text-center demo_link d-block">2020 @ All rights reserved Powered by <a href="#">demo.com</a></div>
				</div>
			</div>
		</div>
	</div> <!-- row first_footer -->
</div> <!-- footer -->

<!-- footer end -->



	<script src="js/jquery-3.4.1.min.js"></script>
	<script src="js/owl.carousel.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/popper.min.js"></script>
	<script src="js/all.min.js"></script>
	<script src="js/index.js"></script>
	<script src="js/wow.min.js"></script>

<!--商品模版-->
<script id="waresTemplate" type="text/html">
	{{#  layui.each(d,function(i, wares){ }}
	<div class="item col-xl-3">
		<div class="product_thumb bg-white rounded" >
			<div class="pro_image">
				<a href="single-product.html"><img  src="{{wares.mainPic}}" class="fst-image mx-auto d-block img-fluid" alt="这是一张商品图片"></a>
				<a href="single-product.html"><img  src="{{wares.mainPic}}" class="second-img mx-auto d-block img-fluid" alt="product_2"></a>
			</div>

			<div class="text-center main_text pt-3">
				<div>
					<div class="star mb-2">
						<i class="fa fa-star" aria-hidden="true"></i>
						<i class="fa fa-star" aria-hidden="true"></i>
						<i class="fa fa-star" aria-hidden="true"></i>
						<i class="fa fa-star" aria-hidden="true"></i>
						<i class="fa fa-star" aria-hidden="true"></i>
					</div>

					<h2 class="pro-heading  font-weight-bolder mb-1	"><a target="_blank" href="/wares/singleProductPage?id={{wares.id}}">{{wares.waresName}}</a></h2>


						<span class="font-weight-bold price">
						<del class="text-muted">{{wares.prePrice}}</del>
						<span>{{wares.price}}</span>
						<span>RMB</span>
					    </span>

					<p class="description mt-1 text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>

					<div class="button-group">
						<a href="#" class="symbol" data-toggle="modal" data-target="#cart_model"><svg width="20px" height="19px"><use xlink:href="#pro_cart"></use></svg></a>
						<a href="#" class="symbol" data-toggle="modal" data-target="#compare_model"><svg width="20px" height="19px"><use xlink:href="#pro_compare"></use></svg></a>
						<a href="#" class="symbol"  data-toggle="modal" data-target="#eye_model"><svg width="20px" height="19px"><use xlink:href="#pro_eye"></use></svg></a>
						<a href="#"  class="symbol" data-toggle="modal" data-target="#heart_model"><svg width="20px" height="19px"><use xlink:href="#pro_heart"></use></svg></a>
					</div>
			</div>
		</div>
	</div>
	</div> <!-- item -->

	{{#  }); }}
</script>

<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>

	layui.use([ 'form', 'table', 'layer','laytpl' ], function() {
		var $ = layui.jquery, form = layui.form;
		var table = layui.table;
		var layer = layui.layer;
		var laytpl = layui.laytpl;


		//给购物车按钮绑定事件
		$("body").on("click","#cart",function (){
			//判断一下是否登录
			$.post("/cart/loginOrNO",function (res){
				if(res===1){
					window.top.location.href="/cart/cartPage";//登陆了-跳转购物车
				}else{
					window.top.location.href="/login";//没登录-跳转登录页面
				}

			});
		});

		//获取每个二级分类对应的商品信息
		$.post("/wares/waresList?id="+$("#secondId").val(),function(wares) {
			laytpl($("#waresTemplate").html()).render(wares,function (ht){
				$("#model").html(ht);
			});
		});

	});
</script>
</body>
</html>